<route>
{
  "meta":{
    "title":"功能插件",
    "envHide":"DESINGER,PREVIEW",
    "showMenu" :true,
    "serialNum": 70,
    "localism": "sys.system_featurePlugin"
  }
}
</route>
<template>
  <div v-loading="loading">
    <el-empty v-if="!pluginList.length" description="暂无功能插件"></el-empty>
    <el-row :gutter="12" v-else>
      <el-col
        :xs="24"
        :sm="12"
        :md="8"
        :lg="6"
        :xl="4"
        v-for="(plugin, index) in pluginList"
        :key="index"
      >
        <el-card class="plugin-card mb10" shadow="hover">
          <div class="plugin-content">
            <img :src="imgsMap[plugin.group]" width="30" class="mr15" />
            <div>
              <div :title="plugin.name" class="plugin-title mb10">
                {{ plugin.name }}
              </div>
              <div
                class="plugin-status"
                :style="{
                  color: plugin.enabled == 'false' ? '#909399' : '#67c23a',
                }"
              >
                {{ plugin.enabled == "false" ? "未启用" : "已启用" }}
              </div>
            </div>
            <i
              @click="handleSetting(plugin)"
              class="el-icon-setting f24 settingIcon"
              style="color: #3d64ff"
            ></i>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getTenantAppPage } from "@/api/plugin.js";
export default {
  components: {},
  data() {
    return {
      loading: false,
      imgsMap: {
        officialaccounts: require("@/assets/image/wechat.svg"),
        wx: require("@/assets/image/enterprise_wechat.svg"),
        dingtalk: require("@/assets/image/dingtalk.svg"),
        miniapp: require("@/assets/image/miniapp.svg"),
      },
      pluginList: [
        // {
        //   name: "钉钉",
        //   enabled: "false",
        //   group: "dingtalk",
        // },
        // {
        //   name: "小程序",
        //   enabled: "false",
        //   group: "miniapp",
        // },
        // {
        //   name: "公众号",
        //   enabled: "false",
        //   group: "officialaccounts",
        // },
        // {
        //   name: "企业微信",
        //   enabled: "false",
        //   group: "wx",
        // },
      ],
    };
  },
  created() {
    this.getPluginList();
  },
  methods: {
    getPluginList() {
      this.loading = true;
      getTenantAppPage()
        .then((res) => {
          this.pluginList = res;
        })
        .catch((err) => {
          this.pluginList = [];
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleSetting(plugin) {
      console.log(plugin);
      this.$router.push({
        name: "appSetting-featurePlugin-info",
        query: {
          group: plugin.group,
          name: plugin.name,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.plugin-card {
  border: 1px solid #dcdfe6;
  position: relative;
  cursor: pointer;

  ::v-deep .el-card__body {
    padding: 0;

    .plugin-content {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      padding: 20px;
      box-sizing: border-box;
    }

    .plugin-title {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .settingIcon {
      position: absolute;
      top: 10px;
      right: 10px;
    }
  }
}
</style>
